<template>
    <page-main>
        <el-form size="mini" :inline="true" :model="searchs" class="demo-form-inline">
            <el-form-item label="审批人">
                <el-input v-model="searchs.user" clearable="" placeholder="审批人" />
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="searchs.region" clearable="" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add">查询</el-button>
                <el-button type="primary" @click="dialogVisible = true">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="tableData"
            border
            style="width: 100%;"
        >
            <el-table-column
                prop="id"
                align="center"
                label="ID"
                width="180"
            />
            <el-table-column
                align="center"
                prop="name"
                label="栏目名称"
                width="180"
            />
            <el-table-column
                align="center"
                prop="time"
                label="创建时间"
            />
            <el-table-column
                prop="user"
                align="center"
                label="创建人"
            />
            <el-table-column
                prop="bz"
                align="center"
                label="备注"
            />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="handleEdit( scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        size="mini"
                        type="default"
                        @click="handleDelete(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <Page :page="page" @current-change="currentChange" @size-change="sizeChange" />
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <el-form ref="form" :rules="formRule" :model="form" size="mini" label-width="80px">
                <el-form-item label="栏目名称" prop="name">
                    <el-input v-model="form.name" clearable="" placeholder="请输入栏目名称" />
                </el-form-item>
                <el-form-item label="备注" prop="bz">
                    <el-input v-model="form.bz" clearable="" placeholder="请输入栏目备注" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="commit('form')">确 定</el-button>
            </span>
        </el-dialog>
    </page-main>
</template>

<script>
import Page from '@/components/page'
export default {
    components: {
        Page
    },
    data() {
        return {
            dialogVisible: false,
            tableData: [
            ],
            page: {
                current: 1,
                size: 10,
                total: 200
            },
            searchs: {
                users: ''
            },
            form: {
                name: '',
                user: 'admin',
                bz: '',
                time: ''
            },
            formRule: {
                name: [
                    {required: true, message: '请输入栏目名称', trigger: 'change'}
                ]
            },
            types: 'add'
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        handleEdit(d) {
            this.dialogVisible = true
            this.form = d
            this.types = 'edit'
        },
        getList() {
            this.$fetch('getClunm').then(res => {
                if (res.code == 200) {
                    this.tableData = res.body
                }
            })
        },
        add() {
            this.$api.post('/zssa/sadadq', this.params).then(res => {
                if (res.success) {
                    alert('123')
                }
            })
        },
        currentChange(d) {
            this.page.current = d
            this.$message.success('反野了')
        },
        sizeChange(d) {
            this.page.size = d
        },
        handleDelete(d) {
            this.$confirm('确定删除当前商品数据吗？', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            // eslint-disable-next-line no-unused-vars
            }).then(__ => {
                this.$fetch('delClunm?id=' + d.id).then(res => {
                    if (res.code == 200) {
                        this.getList()
                        this.$message.success(res.message)
                    }
                })
            // eslint-disable-next-line no-unused-vars
            }).catch(_ => {})
        },
        commit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let url = ''
                    if (this.types == 'add') {
                        url = 'addClunm'
                    } else {
                        url = 'updateClunm'
                    }
                    this.form.time = new Date().getTime()
                    this.$post(url, this.form).then(res => {
                        if (res.code == 200) {
                            this.getList()
                            this.$message.success(res.message)
                            this.dialogVisible = false
                            // eslint-disable-next-line no-unused-vars
                            this.$nextTick(_ => {
                                this.$refs[formName].resetFields()
                            })
                        }
                    })
                } else {

                    return false
                }
            })
        }
    }
}
</script>

<style scope>
.box {
    color: red;
}
</style>
